<template>
	<view class="all-main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="欢迎进入风动社区"></u-loading-page>
		<view v-if="!loadding" class="main">
			<view class="con">
				<view class="item">
					<view class="lefts">
						业务员
					</view>
					<view class="rights">
						<text>{{info.nickname}}</text>
						<!-- <text>18748149147</text> -->
					</view>
				</view>
				<u-line></u-line>
				<view class="item">
					<view class="lefts">
						产品
					</view>
					<view class="rights">
						<text>{{info.name}}</text>
					</view>
				</view>
				<u-line></u-line>
				<view class="item">
					<view class="lefts">
						数量
					</view>
					<view class="rights">
						<text>{{info.number}}</text>
					</view>
				</view>
				<u-line></u-line>
				<view class="item">
					<view class="lefts">
						状态
					</view>
					<view class="rights">
						<text v-if="info.status == 1">待审核</text>
						<text v-if="info.status == 2">已审核</text>
						<text v-if="info.status == 3">已调货</text>
						<text v-if="info.status == 4">已退货</text>
					</view>
				</view>
				<u-line></u-line>
				<view class="item">
					<view class="lefts">
						下单时间
					</view>
					<view class="rights">
						<text>{{info.create_time_text}}</text>
					</view>
				</view>
			</view>
			<view v-if="!is_get && customerinfo.is_typs == 3 && info.status == 2" class="btn" @click="getTer">
				领取终端
			</view>
			<view v-if="is_get && customerinfo.is_typs == 3" class="terminal">
				<view class="top">
					<view class="scan-op">
						<view class="inputs">
							<input type="text" v-model="sn" placeholder="请输入终端SN" />
						</view>
						<!-- #ifdef APP -->
						<view class="scan" @click="scanApp">
							<u-icon name="scan" size="40"></u-icon>
						</view>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="scan" @click="scan">
							<u-icon name="scan" size="40"></u-icon>
						</view>
						<!-- #endif -->
					</view>
					<view class="btn" @click="addSn">
						添加
					</view>
				</view>
				<u-line></u-line>
				<view class="cons">
					<view class="lefts">
						<text>终端信息</text>
						<text>({{selectSnData.length}}/{{info.number}})</text>
					</view>
					<view class="rights">
						<text v-if="isEdit == 2" @click="allSelectSn">全选</text>
						<text v-if="isEdit == 2" @click="snDel">删除</text>
						<text v-if="isEdit == 2" @click="editFun">取消</text>
						<text v-if="isEdit == 1" @click="editFun">编辑</text>
					</view>
				</view>
				<u-line></u-line>
				<view class="lists">
					<u-checkbox-group v-if="selectSnData.length > 0" v-model="checkData" placement="column">
						<view v-for="(item, index) in selectSnData" :key="index">
							<view class="items">
								<view class="lefts">
									{{item}}
								</view>
								<view class="rights">
									<u-checkbox v-if="isEdit == 2" :name="item" activeColor="red"></u-checkbox>
								</view>
							</view>
							<u-line class="lines" dashed=""></u-line>
						</view>
					</u-checkbox-group>
					<u-empty v-else text="您还没有选择终端" icon="../../../static/Empty/search_null.png"></u-empty>
				</view>
			</view>
			<view v-if="is_get && customerinfo.is_typs == 3" class="btn" @click="saveTerminal">
				领取
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('@/util/request5.js');
	/*#ifdef H5*/
	import wx from 'weixin-js-sdk';
	/*#endif*/
	export default {
		data() {
			return {
				loadding: true,
				customerinfo: {},
				sn: '',
				checkData: [],
				selectSnData: [],
				isEdit: 1,
				mySnList: [],
				is_true: true,
				info: {},
				is_get: false,
				id: ''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.customerinfo = uni.getStorageSync('customerinfo');
			this.getData()
			/*#ifdef H5*/
			this.injectConfig()
			/*#endif*/
		},
		methods: {
			// 获取统计数据
			async getData() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getTerminalApplyDetail',
					data: {
						apply_id: this.id
					},
					header: {
						'token': this.customerinfo.token
					}
				});
				this.loadding = false
				if (res.code == 1) {
					this.info = res.data[0]
				}
			},
			// 点击领取终端
			getTer() {
				this.is_get = true
			},
			// 添加终端
			addSn() {
				if (this.sn == '') {
					uni.showToast({
						title: '请扫码或输入SN',
						icon: 'none'
					})
					return false
				}
				if (this.selectSnData.indexOf(this.sn) >= 0) {
					uni.showToast({
						title: '该SN已存在',
						icon: 'none'
					})
					return false
				}
				if (this.selectSnData.length >= this.info.number) {
					uni.showToast({
						title: '已超出发货数量',
						icon: 'none'
					})
					return false
				}
				this.selectSnData.push(this.sn)
				this.sn = ''
			},
			// 已选终端编辑
			editFun() {
				if (this.isEdit == 1) {
					this.isEdit = 2
				} else {
					this.isEdit = 1
				}
			},
			// 已选终端 - 删除
			snDel() {
				var that = this
				var newDataList = []
				if (this.checkData.length <= 0) {
					uni.showToast({
						title: '请选择要删除的SN',
						icon: 'none'
					})
					return false
				}
				uni.showModal({
					title: '提示',
					content: '确定要删除选择的SN吗？',
					success: function(res) {
						if (res.confirm) {
							for (var i in that.selectSnData) {
								if (that.checkData.indexOf(that.selectSnData[i]) == -1) {
									newDataList.push(that.selectSnData[i])
								}
							}
							that.checkData = []
							that.selectSnData = newDataList
							if (that.selectSnData.length <= 0) {
								that.isEdit = 1
							}
						}
					}
				});
			},
			// 全选
			allSelect() {
				if (this.checkSnData.length != this.mySnList.length) {
					this.checkSnData = this.mySnList
				} else {
					this.checkSnData = []
				}
			},
			// 已选 - 全选
			allSelectSn() {
				if (this.checkData.length != this.selectSnData.length) {
					this.checkData = this.selectSnData
				} else {
					this.checkData = []
				}
			},
			// 微信公众号配置
			injectConfig() {
				let url = ''
				url = window.location.href.split('#')[0];
				uni.request({
					url: util.API_URL + '/api/v1/test',
					data: {
						url: url
					},
					success: (res) => {
						const data = res.data
						if (data.code == 1) {
							wx.config({
								debug: false, // 开启调试模式,
								appId: data.data.appId, // 必填，企业号的唯一标识
								timestamp: data.data.timestamp, // 必填，生成签名的时间戳
								nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
								signature: data.data.signature, // 必填，签名
								jsApiList: data.data.jsApiList, // 必填，需要使用的JS接口列表
							});
							wx.ready(() => {})
							wx.error(function(err) {});
						}
					},
					fail(err) {}
				});
			},
			// APP扫码
			scanApp() {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode'],
					success: function(res) {
						_this.sn = res.result
					}
				});
			},
			// 调用微信扫码
			scan() {
				let _this = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var resultrow = String(res.resultStr).split(",");
						if (resultrow[0] == 'CODE_128') {
							_this.sn = resultrow[1]
						} else {
							uni.showToast({
								title: '请识别有效的条形码!',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: function(res) {},
				});
			},
			// 领取终端
			saveTerminal() {
				var that = this
				if (this.selectSnData.length <= 0) {
					uni.showToast({
						title: '请输入终端',
						icon: "none"
					});
					return false
				}
				if (this.selectSnData.length < this.info.number) {
					uni.showToast({
						title: '终端未选全',
						icon: "none"
					});
					return false
				}
				uni.showModal({
					title: '提示',
					content: '确定要领取吗？',
					success: function(res) {
						if (res.confirm) {
							that.saveTerminalFun()
						}
					}
				});
			},
			// 领取终端 - 方法
			async saveTerminalFun() {
				var that = this
				if (this.is_true) {
					this.is_true = false
					uni.showLoading({
						title: '加载中'
					});
					const {
						data: res
					} = await this.$myHttp5({
						url: 'v1/saveTerminal',
						data: {
							sn: this.selectSnData,
							apply_id: this.info.id
						},
						header: {
							'token': this.customerinfo.token
						}
					});
					this.is_true = true
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					if (res.code == 1) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1, // 返回的页面数，如果为1表示返回上一页
							});
						},1500)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.all-main {
		.main {
			padding: 20rpx;

			.con {
				.item {
					background-color: #ffffff;
					padding: 20rpx;
					display: flex;
					justify-content: space-between;

					.rights {
						text {
							font-weight: bold;
							margin-left: 10rpx;
						}
					}
				}
			}

			.btn {
				margin-top: 20rpx;
				background-color: #2979ff;
				color: #ffffff;
				padding: 20rpx;
				border-radius: 12rpx;
				text-align: center;
			}
			
			.terminal {
				margin-top: 20rpx;
				background-color: #ffffff;
				border-radius: 12rpx;
				.top {
					padding: 0 20rpx;
					.scan-op{
						padding: 20rpx 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.inputs {
							width: 90%;
							input {
								border: 1px solid #909399;
								border-radius: 10rpx;
								padding: 10rpx;
							}
						}
						.scan {
							width: 10%;
						}
					}
					.btn {
						margin-top: 0;
						margin-bottom: 20rpx;
					}
				}
				.cons {
					display: flex;
					justify-content: space-between;
					padding: 20rpx;
					font-size: 28rpx;
					align-items: center;
					.lefts {
						text {
							padding-right: 10rpx;
						}
					}
					.rights {
						display: flex;
						text {
							padding-left: 20rpx;
						}
					}
				}
				.lists {
					padding: 0 20rpx;
					min-height: 300rpx;
					.items {
						padding: 20rpx 0;
						display: flex;
						justify-content: space-between;
						font-size: 26rpx;
						align-items: center;
						
					}
				}
			}
		}
	}
</style>